import React, { useState, useEffect, useRef } from 'react';
import { Pop } from '../../types';
import { Bot, Package } from 'lucide-react';

interface PopQueueProps {
  PopQueue: Pop[];  // 接收父组件传来的 Pop 队列数据
  refreshSignal: boolean; // 接收用于触发刷新本地存储的信号
}

const MAX_MESSAGES = 10;    // 最大消息数，超过这个数量的消息将被丢弃

export function PopQueue({ PopQueue, refreshSignal }: PopQueueProps) {
  const [popQueue, setPopQueue] = useState<Pop[]>(PopQueue);  // 存储显示的消息队列
  const scrollRef = useRef<HTMLDivElement>(null);  // 用于滚动到消息底部的引用

  // 初始化消息队列，尝试从本地存储中获取历史消息
  useEffect(() => {
    const storedQueue = localStorage.getItem('popQueue');
    if (storedQueue) {
      setPopQueue(JSON.parse(storedQueue));  // 如果有历史消息，加载它们
    }
  }, []);

  // 每次 PopQueue 更新时，更新 popQueue，并控制消息队列的长度
  useEffect(() => {
    setPopQueue((prevQueue) => {
      // 新消息去重：检查新消息是否已经存在
      const updatedQueue = [
        ...prevQueue,
        ...PopQueue.filter((pop) => pop && pop.serialNumber && pop.message && !prevQueue.some((p) => p.serialNumber === pop.serialNumber && p.message === pop.message))
      ];

      if (updatedQueue.length > MAX_MESSAGES) {
        const finalQueue = updatedQueue.slice(-MAX_MESSAGES);  // 保留最后 MAX_MESSAGES 条消息
        localStorage.setItem('popQueue', JSON.stringify(finalQueue)); // 更新本地存储
        return finalQueue;
      }
      localStorage.setItem('popQueue', JSON.stringify(updatedQueue)); // 更新本地存储
      return updatedQueue;
    });
  }, [PopQueue]); // 只有 PopQueue 改变时才更新 popQueue

  // 每次 refreshSignal 改变时，清空 localStorage 中的队列并清空 popQueue
  useEffect(() => {
    localStorage.removeItem('popQueue');  // 清空 localStorage 中的 popQueue
    setPopQueue([]);  // 清空当前 popQueue
  }, [refreshSignal]); // 监听 refreshSignal 变化来清空数据

  // 每次 popQueue 更新时，滚动到底部
  // useEffect(() => {
  //   if (scrollRef.current) {
  //     scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  //   }
  // }, [popQueue]);

  return (
    <div
      ref={scrollRef}
      className="flex flex-col space-y-4 overflow-y-auto p-4 border border-gray-300 rounded-lg shadow-lg bg-white"
      style={{ height: '40vh' }}
    >
      {popQueue.length === 0 ? (
        <div className="text-center text-gray-500">暂无消息</div>
      ) : (
        popQueue.map((pop, index) => {
          // 检查 pop 是否有效，避免空值访问
          if (!pop || !pop.serialNumber || !pop.message) {
            return null;  // 如果 pop 不有效，则不渲染此项
          }

          return (
            <div
              key={index}
              className={`p-4 rounded-lg w-full shadow-md flex items-center ${
                pop.popType === 'REGISTER'
                  ? 'bg-green-200 border-2 border-green-600'
                  : pop.popType === 'DELIVER'
                  ? 'bg-yellow-200 border-2 border-yellow-600'
                  : pop.popType === 'COLLISION'
                  ? 'bg-red-200 border-2 border-red-600'
                  : pop.popType === 'LOST'
                  ? 'bg-gray-200 border-2 border-gray-600'
                  : 'bg-white'
              }`}
            >
              {pop.robotType === 'ROBOT' ? (
                <>
                  <Bot size={24} className="mr-4 text-blue-600" />
                  <div>
                    <div className="font-semibold text-sm text-gray-700">#机器人 {pop.serialNumber}</div>
                    <div className="text-gray-800">{pop.message}</div>
                  </div>
                </>
              ) : (
                <>
                  <Package size={24} className="mr-4 text-yellow-600" />
                  <div>
                    <div className="font-semibold text-sm text-gray-700">#发药机 {pop.serialNumber}</div>
                    <div className="text-gray-800">{pop.message}</div>
                  </div>
                </>
              )}
            </div>
          );
        })
      )}
    </div>
  );
}
